<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-27 09:53:41
 * @LastEditTime: 2021-07-30 17:44:40
 * @Description: 
-->
<template>
  <main class="index">
    <div class="universe" />
    <h1 class="m-title">{{ $t('message.title', { msg: 'hello' }) }}</h1>
    <n-button type="info" dashed size="large" @click="onInto">点击进去</n-button>
    <div id="app" />
  </main>
</template>
<script>
import { NButton } from 'naive-ui';
import { onMounted, onUnmounted } from 'vue';
import { create, component, createAppCom } from './count.js';
import router from '../router/index.js'; // 路由
export default {
  setup() {
    let app;
    // 去往handle
    const onInto = () => {
      router.push('/handle/demo');
    };
    onMounted(() => {
      app = create(createAppCom);
      app.component('button-counter', component);
      app.mount('#app');
    });
    onUnmounted(() => {
      app.unmount('#app');
    });
    return {
      onInto
    };
  },
  components: {
    NButton
  }
};
</script>
<style lang="less">
@import './index.less';
</style>
